import React, { Component } from 'react';
import {
	StyleSheet, Text, View, FlatList, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';

const scale = GLOBAL.SCALE;
export class ListComponent extends Component {
	constructor(props) {
		super(props);
	}

	_gotoPage (item) {
		let { orderId, bizMode } = item;
		this.props.navigate('OrderDetailsPage', {
			orderId: orderId,
		});
	}

	render () {
		let { dataArray, recordCount, nowList, loadIcon } = this.props;
		return (
			<View style={styles.listBox}>
				<FlatList
					data={dataArray}
					renderItem={(data) => this._renderItem(data)}
					refreshing={loadIcon}
					onRefresh={() => { this._upLoad() }}
					onEndReachedThreshold={1}
					onEndReached={() => { this._downLoad() }}
				/>
				{
					dataArray.length > 0 ? (<PageStatusIndex status="bottom" recordCount={recordCount} nowList={nowList} />) : null
				}
			</View>
		)
	}

	// 一条数据模板
	_renderItem (data) {
		let { orderId, createTime, companyName,
			orderType, orderStatus, statusName, orderItemList, } = data.item;
		let orderTypeStr = orderType === 'P' ? '采购' : '销售';
		let companyStr = orderType === 'P' ? '供应商' : '客户';
		return (
			<View style={styles.list}>
				<View style={styles.listNr}>
					<View style={styles.listHead}>
						<Text style={styles.listHeadLeft}>{orderId}</Text>
						<Text style={styles.listHeadRight}>{createTime}</Text>
					</View>
					<TouchableOpacity onPress={() => {
						this._gotoPage(data.item);
					}}>
						<View style={styles.listContent}>
							<View style={styles.listItem}>
								<Text style={[styles.listText, { width: '100 %' }]}>{companyStr}：{companyName}</Text>
							</View>
							{
								orderItemList && orderItemList.map((myItem, index) => {
									let { goodsName, price, quantity } = myItem;
									return (
										<View key={index}>
											<View style={styles.listItem}>
												<Text style={[styles.listText, { width: '100%' }]} numberOfLines={1}>{orderTypeStr}品类：{goodsName}</Text>
											</View>
											<View style={styles.listItem}>
												<Text style={styles.listText}>数量：{quantity}</Text>
												<Text style={styles.listText}>{orderTypeStr}单价：<Text style={styles.themeColor}>￥{price}</Text></Text>
											</View>
										</View>
									)
								})
							}
						</View>
						<Text style={styles.listBottom}>
							订单状态：{statusName}
						</Text>
					</TouchableOpacity>
				</View>
			</View >
		)
	}
	//状态-数据为空
	_emptyFn = () => {
		return (
			<View style={{ flex: 1 }}>
				<PageStatusIndex status="empty" emptyText="没有搜到相关信息哦" />
			</View>
		)
	}
	//底部加载
	_downLoad () {
		this.props.downLoad();
	}
	//下拉更新函数
	_upLoad () {
		this.props.upLoad();
	}
	//状态-加载前
	_loadFn = () => {
		return (
			<View style={{ flex: 1 }}>
				<PageStatusIndex status="loading" />
			</View>
		)
	}


}
const styles = StyleSheet.create({
	listBox: {
		backgroundColor: style.color.dullGrey,
		paddingBottom: 40 * scale,
		flex: 1
	},
	list: {
		backgroundColor: style.color.white,
		marginTop: 12 * scale
	},
	listNr: {
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale
	},
	listHead: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		height: 43 * scale,
	},
	listHeadLeft: {
		fontSize: 13 * scale,
		color: style.color.dark,
		lineHeight: 43 * scale
	},
	listHeadRight: {
		lineHeight: 43 * scale,
		color: style.color.darkGray,
		fontSize: 12 * scale,
	},
	listContent: {
		//height: 90 * scale,
		backgroundColor: style.color.light,
		paddingTop: 8 * scale
	},
	listBottom: {
		lineHeight: 43 * scale,
		fontSize: 13 * scale,
		color: style.color.normal
	},
	listItem: {
		height: 20 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		marginTop: 8 * scale,
		marginBottom: 8 * scale,
		paddingLeft: 12 * scale,
	},
	listText: {
		width: '50%',
		lineHeight: 20 * scale,
	},
})